<template>
  <div class="question-info" ref="questionBoxRef">
    <p class="question-title">问卷信息</p>
    <div class="question-main">
      <div v-for="(item, index) of questionList" :key="index" class="question-item">
        <div class="item-sort">{{ index + 1 }}</div>
        <div class="item-label">
          <div class="label-title">{{ item.entryTitle }}</div>
        </div>
        <div class="item-info">
          <div :class="['item-type', 'type-' + item.entryType]">{{ getType(item.entryType) }}</div>
          <div class="item-content">
            <el-input v-model="item.content" disabled v-if="item.entryType === '1'" size="default" />
            <template v-if="item.entryType === '2'">
              <el-radio v-for="(sItem, inx) of getContent(item)" :key="inx" disabled>{{sItem.optionName}}</el-radio>
            </template>
            <template v-if="item.entryType === '3'">
              <el-checkbox v-for="(sItem, inx) of getContent(item)" :key="inx" v-model="sItem.checked" disabled>{{sItem.optionName}}</el-checkbox>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref, toRefs} from "vue";
import {entryGetList} from "@/api/extendEntry";

const props = defineProps({
  contentVoList: {
    type: Array,
    default: () => []
  }
})
const questionList = computed(() => {
  const arr = props.contentVoList || []
  const contentVoList = arr.filter((item) => item)
  contentVoList.forEach((item: any) => {
    entryList.value.forEach((sItem: any) => {
      if (item.entryId === sItem.id) {
        item.entryTitle = sItem.entryTitle
      }
    })
  })
  entryList.value.forEach((sItem: any) => {
    contentVoList.forEach((item: any) => {
      if (item.entryId === sItem.id) {
        sItem.content = item.content
      }
    })

  })
  return entryList.value
})
const entryList = ref<Record<string, any>[]>([]);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const {entry_type} = toRefs<any>(proxy?.useDict("entry_type"));
const questionBoxRef = ref<any>();

function getType(type: string) {
  const part = entry_type.value.find((item: any) => item.value === type)
  return part?.label
}

function getContent(item: any) {
  const part = entryList.value.find((sItem: any) => item.entryId === sItem.id)
  const optionVoList = part?.optionVoList || []
  const ids = item.content.split(',') || []
  const arr = optionVoList.filter((sItem: any) => ids.includes(sItem.id))
  if (item.entryType === '3') arr.forEach((sItem: any) => sItem.checked = true)
  return arr
}

entryGetList().then((res) => {
  entryList.value = res.data || [];
})



defineExpose({questionBoxRef})

defineComponent({name: "QuestionInfo"});
</script>

<style scoped lang="scss">
.question-info {
  position: relative;
  width: 100%;
  height: calc(100% - 540px);
  padding: 20px;
  background-color: #fff;

  .question-title {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 20px;
    color: #2e3244;
  }

  .question-main {
    width: 100%;
    background: #f9f9f9;

    .question-item {
      position: relative;
      height: 84px;
      margin: 0 20px 0 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid rgba(187, 187, 187, 0.5);

      .item-sort {
        position: absolute;
        top: 50%;
        left: -40px;
        transform: translateY(-50%);
        width: 84px;
        height: 30px;
        padding-left: 10px;
      }

      &:first-child .item-sort {
        color: #ff0012;
        background: linear-gradient(
                90deg,
                rgba(255, 30, 28, 0.3) 0%,
                rgba(255, 49, 99, 0) 100%
        );
      }

      &:nth-child(2) .item-sort {
        color: #ff9100;
        background: linear-gradient(
                90deg,
                #ffa900 0%,
                rgba(255, 211, 37, 0) 100%
        );
      }

      &:nth-child(3) .item-sort {
        color: #9e5600;
        background: linear-gradient(
                96deg,
                #ff9a42 0%,
                rgba(238, 111, 0, 0) 100%
        );
      }

      .item-label {
        margin-bottom: 6px;
        font-weight: 700;
        font-size: 16px;
        color: #2e3244;

        .label-title {
          margin-right: 20px;
        }
      }

      .item-info {
        display: flex;
        align-items: center;
        color: #999;

        .item-content {
          width: auto;
        }

        .item-type {
          width: 54px;
          height: 20px;
          margin-right: 10px;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          color: #fff;

          &.type-1 {
            background: #4fd278;
          }

          &.type-2 {
            background: #8d7fe0;
          }

          &.type-3 {
            background: #fbb643;
          }

          &.type-4 {
            background: #54a6f7;
          }
        }
      }
    }
  }

  .footer-btn {
    width: 160px;
    height: 46px;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #B2B2B2;
    cursor: pointer;
  }
}
</style>
